<template>
    <el-container class="register-view">
        <div>
            <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px"
                     class="web-ruleForm">
                <div class="register-brand">
                    <div>Welcome to become a user</div>
                </div>
                <el-form-item label="Username" prop="userName">
                    <el-input type="userName" v-model="registerForm.userName" autocomplete="off"
                              placeholder="Username (for login)"></el-input>
                </el-form-item>
                <el-form-item label="Nickname" prop="nickName">
                    <el-input type="nickName" v-model="registerForm.nickName" autocomplete="off"
                              placeholder="Nickname"></el-input>
                </el-form-item>
                <el-form-item label="Password" prop="password">
                    <!-- <el-input type="password" v-model="registerForm.password" autocomplete="off"
                              placeholder="Password"></el-input> -->
                    <el-input 
                      :type="showPassword ? 'text' : 'password'"
                      v-model="registerForm.password"
                      autocomplete="off"
                      placeholder="Password"
                    >
                        <template #suffix>
                            <i
                              :class="showPassword ? 'el-icon-view' : 'el-icon-view'"
                              style="cursor: pointer; color: #c0c4cc;"
                              @mouseover="e => e.target.style.color = '#409EFF'"
                              @mouseout="e => e.target.style.color = '#c0c4cc'"
                              @click="showPassword = !showPassword"
                            ></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="Confirm" prop="confirmPassword">
                    <!-- <el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"
                              placeholder="Confirm Password"></el-input> -->
                    <el-input 
                      :type="showConfirmPsw ? 'text' : 'password'"
                      v-model="registerForm.confirmPassword"
                      autocomplete="off"
                      placeholder="Confirm Password"
                    >
                        <template #suffix>
                            <i
                              :class="showPassword ? 'el-icon-view' : 'el-icon-view'"
                              style="cursor: pointer; color: #c0c4cc;"
                              @mouseover="e => e.target.style.color = '#409EFF'"
                              @mouseout="e => e.target.style.color = '#c0c4cc'"
                              @click="showConfirmPsw = !showConfirmPsw"
                            ></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('registerForm')">Register</el-button>
                    <el-button @click="resetForm('registerForm')">Clear</el-button>
                </el-form-item>
                <div class="to-login">
                    <router-link to="/login">Already have an account, go to login</router-link>
                </div>
            </el-form>
        </div>
    </el-container>
</template>

<script>
import Icp from '../components/common/Icp.vue'
export default {
    name: "login",
    components: {
        Icp
    },
    data() {
        var checkUserName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('Please enter a username'));
            }
            callback();
        };
        var checkNickName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('Please enter a nickname'));
            }
            callback();
        };
        var checkPassword = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('Please enter a password'));
            }
            callback();
        };

        var checkConfirmPassword = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('Please enter a password'));
            }
            if (value!= this.registerForm.password) {
                return callback(new Error('The two passwords do not match'));
            }
            callback();
        };


        return {
            showPassword: false,
            showConfirmPsw: false,
            registerForm: {
                userName: '',
                nickName: '',
                password: '',
                confirmPassword: ''
            },
            rules: {
                userName: [{
                    validator: checkUserName,
                    trigger: 'blur'
                }],
                nickName: [{
                    validator: checkNickName,
                    trigger: 'blur'
                }],
                password: [{
                    validator: checkPassword,
                    trigger: 'blur'
                }],
                confirmPassword: [{
                    validator: checkConfirmPassword,
                    trigger: 'blur'
                }]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http({
                        url: "/register",
                        method: 'post',
                        data: this.registerForm
                    })
                      .then((data) => {
                            this.$message.success("Registration successful!");
                        })
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style scoped lang="scss">
.register-view {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f1f3f4; 

   .web-ruleForm {
        width: 400px; 
        background: #fff;
        border-radius: 8px; 
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
        padding: 32px; 
        box-sizing: border-box;

       .register-brand {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24px; 
            font-size: 24px; 
            font-weight: 500;
            letter-spacing: 0.5px;

           .logo {
                width: 36px; 
                height: 36px;
                margin-right: 12px;
            }
        }

       .el-form-item {
            margin-bottom: 16px; 

           .el-input__inner {
                border-radius: 4px;
                border: 1px solid #d9d9d9;
                padding: 8px 12px;
                font-size: 14px;

                &:focus {
                    border-color: #1a73e8; 
                    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
                }
            }
        }

       .el-button {
            height: 36px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;

            &.el-button--primary {
                background-color: #1a73e8;
                border-color: #1a73e8;

                &:hover {
                    background-color: #1765cc;
                    border-color: #1765cc;
                }
            }

            &.el-button--default {
                color: #1a73e8;

                &:hover {
                    background-color: rgba(26, 115, 232, 0.04);
                }
            }
        }

       .to-login {
            display: flex;
            justify-content: flex-end;
            margin-top: 16px;
            font-size: 14px;

            a {
                color: #1a73e8;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>
